<template>
  <div class="map-container">
    <div ref="chartRef" class="chart"></div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'
import * as echarts from 'echarts'
import 'echarts-gl'

const chartRef = ref<HTMLElement>()
let chart: echarts.ECharts | null = null

interface LineItem {
  coords: number[][]
  name: string
  lineStyle: {
    width: number
  }
}

const initChart = async () => {
  if (!chartRef.value) return
  
  const mapData = await fetch('https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json')
    .then(res => res.json())
  
  echarts.registerMap('china', mapData)
  
  chart = echarts.init(chartRef.value)
  
  // 扩充城市数据
  const cities = [
    { name: '广州', value: [113.23, 23.16] },
    { name: '上海', value: [121.48, 31.22] },
    { name: '北京', value: [116.46, 39.92] },
    { name: '成都', value: [104.06, 30.67] },
    { name: '深圳', value: [114.07, 22.62] },
    { name: '杭州', value: [120.19, 30.26] },
    { name: '武汉', value: [114.31, 30.59] },
    { name: '西安', value: [108.95, 34.27] },
    { name: '重庆', value: [106.54, 29.59] },
    { name: '南京', value: [118.78, 32.04] },
    { name: '长沙', value: [112.94, 28.23] },
    { name: '青岛', value: [120.38, 36.07] },
    { name: '厦门', value: [118.11, 24.49] }
  ]

  // 生成连线数据
  const generateLines = (): LineItem[] => {
    const lines: LineItem[] = []
    
    // 添加三条主要迁徙线
    lines.push({
      coords: [[113.23, 23.16], [121.48, 31.22]], // 广州-上海
      name: '广州-上海',
      lineStyle: {
        width: 2
      }
    })

    lines.push({
      coords: [[113.23, 23.16], [116.46, 39.92]], // 广州-北京
      name: '广州-北京',
      lineStyle: {
        width: 2
      }
    })

    lines.push({
      coords: [[113.23, 23.16], [87.68, 43.77]], // 广州-新疆
      name: '广州-新疆',
      lineStyle: {
        width: 2
      }
    })

    return lines
  }

  const option = {
    backgroundColor: '#041B35',
    // 添加底图
    geo: [{
      map: 'china',
      aspectScale: 0.85,
      layoutCenter: ['50%', '52%'],
      layoutSize: '100%',
      roam: true,
      scaleLimit: {
        min: 1,
        max: 2
      },
      rotate: 180,
      center: [104.5, 36.5],
      zoom: 1,
      itemStyle: {
        normal: {
          areaColor: {
            type: 'linear-gradient',
            x: 0,
            y: 1200,
            x2: 1000,
            y2: 0,
            colorStops: [{
              offset: 0,
              color: 'rgba(11, 26, 55, 0.95)'  // 底图颜色更深
            }, {
              offset: 1,
              color: 'rgba(3, 56, 85, 0.95)'
            }],
          },
          borderColor: 'rgba(0, 246, 255, 0.2)',
          borderWidth: 5,
          shadowColor: 'rgba(0, 246, 255, 0.2)',
          shadowBlur: 20,
          shadowOffsetY: 20  // 增加阴影偏移
        }
      },
      z: 0,
      zlevel: 0
    },
    {
      // 上层地图
      map: 'china',
      aspectScale: 0.85,
      layoutCenter: ['50%', '50%'],
      layoutSize: '100%',
      roam: true,
      scaleLimit: {
        min: 1,
        max: 2
      },
      rotate: 180,
      center: [104.5, 36.5],
      zoom: 1,
      itemStyle: {
        normal: {
          areaColor: {
            type: 'linear-gradient',
            x: 0,
            y: 1200,
            x2: 1000,
            y2: 0,
            colorStops: [{
              offset: 0,
              color: 'rgba(21, 46, 110, 0.95)'
            }, {
              offset: 1,
              color: 'rgba(6, 115, 173, 0.95)'
            }],
          },
          borderColor: 'rgba(0, 246, 255, 0.8)',
          borderWidth: 5,
          shadowColor: 'rgba(0, 246, 255, 0.8)',
          shadowBlur: 20,
          shadowOffsetY: 10
        },
        emphasis: {
          areaColor: 'rgba(11, 28, 82, 0.95)',
          shadowOffsetY: 15,
          shadowBlur: 25
        }
      },
      z: 1,
      zlevel: 1
    }],
    series: [
      {
        type: 'lines',
        zlevel: 2,
        effect: {
          show: true,
          period: 6,
          trailLength: 0.7,
          color: '#0CFFE6',
          symbol: 'arrow',
          symbolSize: 10
        },
        lineStyle: {
          normal: {
            color: '#0CFFE6',
            width: 2,
            opacity: 0.2,
            curveness: 0.3
          }
        },
        data: generateLines()
      },
      {
        type: 'lines',
        zlevel: 1,
        lineStyle: {
          normal: {
            color: '#0CFFE6',
            width: 1,
            opacity: 0.1,
            curveness: 0.3
          }
        },
        data: generateLines()
      },
      {
        type: 'effectScatter',
        coordinateSystem: 'geo',
        zlevel: 3,
        symbolSize: 6,
        rippleEffect: {
          period: 4,
          scale: 6,
          brushType: 'stroke'
        },
        label: {
          show: true,
          position: 'top',
          formatter: '{b}',
          fontSize: 12,
          color: '#fff',
          backgroundColor: 'rgba(0, 24, 67, 0.8)',
          padding: [4, 8],
          borderRadius: 3,
          distance: 10
        },
        itemStyle: {
          color: '#00F6FF',
          shadowBlur: 10,
          shadowColor: '#00F6FF'
        },
        data: [
          { 
            name: '广州', 
            value: [113.23, 23.16],
            symbolSize: 8,
            itemStyle: {
              color: '#00F6FF'
            }
          },
          { name: '上海', value: [121.48, 31.22] },
          { name: '北京', value: [116.46, 39.92] },
          { name: '新疆', value: [87.68, 43.77] }
        ]
      }
    ]
  }

  chart.setOption(option)
}

// 处理窗口大小变化
const handleResize = () => {
  chart?.resize()
}



onMounted(() => {
  initChart()
  window.addEventListener('resize', handleResize)
})

onUnmounted(() => {
  chart?.dispose()
  window.removeEventListener('resize', handleResize)
})
</script>

<style lang="scss" scoped>
.map-container {
  width: 100%;
  height: 100vh;
  background-color: #041B35;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  
  .chart {
    width: 100%;
    height: 100%;
  }

  .control-panel {
    position: absolute;
    top: 20px;
    right: 20px;
    
    button {
      padding: 8px 16px;
      background: rgba(0, 246, 255, 0.2);
      border: 1px solid rgba(0, 246, 255, 0.8);
      color: #fff;
      border-radius: 4px;
      cursor: pointer;
      
      &:hover {
        background: rgba(0, 246, 255, 0.3);
      }
    }
  }
}
</style>
